<template>
	<view class="order-form-bar">
		<view class="order-form-tabs uni-font-size-base">
			<view class="order-form-tab" v-for="(item, index) in tabList" :key="index">
				<view class="order-form-tab-text" :class="{'active': current === index}" @click="swiperChange(index)">{{item}}</view>
			</view>
		</view>	
		<view class="order-form-swiper">
			<swiper class="swiper-bar" :current="current" @change='swiperChange'>
				<swiper-item v-for="(item, index) in tabList" :key="index">
					<scroll-view scroll-y class="swiper-scroll">
						<navigator url="/pagesOrder/order-details/order-details">
							<order-goods-item>
								<view class="swiper-slot">
									<view class="swiper-slot-but"><buttom-bar title='评价' :width="120"></buttom-bar></view>
									<view class="swiper-slot-but"><buttom-bar title='查看物流' :width="120"></buttom-bar></view>
									<view class="swiper-slot-but"><buttom-bar title='删除订单' :width="120"></buttom-bar></view>
								</view>
							</order-goods-item>
						</navigator>
					</scroll-view>
				</swiper-item>	
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'OrderForm',
		title: '订单',
		methods: {
			// 切换
			swiperChange(event) {
				this.current = event.mp ? event.mp.detail.current : event
			}
		},
		data() {
			return {
				tabList: ['全部', '待付款', '待发货', '待收货', '待评价'],
				current: 0
			};
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/uni.scss';
	.order-form-bar{
		width: 100%;
		.order-form-tabs{
			width: 100%;
			padding: 0 20upx;
			box-sizing: border-box;
			display: flex;
			background: $uni-bg-color;
			position: relative;
			z-index: 3000;
			.order-form-tab{
				flex: 1;
				text-align: center;
				.order-form-tab-text{
					height: 60upx;
					line-height: 60upx;
					display: inline-block;
					&.active{
						color: $uni-color-primary;
						border-bottom: solid 2upx $uni-color-primary;
					}
				}
			}
		}
		.order-form-swiper{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			padding-top: 80upx;
			box-sizing: border-box;
		}
		.swiper-bar{
			width: 100%;
			height: 100%;
			padding:0 20upx;
			box-sizing: border-box;
			.swiper-scroll{
				width: 100%;
				height: 100%;
				.swiper-slot{
					width: 100%;
					padding: 10upx 20upx;
					box-sizing: border-box;
					display: flex;
					justify-content: flex-end;
					.swiper-slot-but{
						margin-left: 10upx;
					}
				}
			}
		}
	}
</style>
